<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="__PUBLIC__/Assets/css/esui.css" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__/Assets/css/union.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__PUBLIC__/Assets/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Assets/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/Assets/js/jscolor.min.js"></script>
<style>
.info-table th, .info-table td{padding:3px 5px;}
</style>
</head>
<body>
<div class="layout-main">    
    <div class="box clear-fix">
		<form method="post" action="{:U('Item/template')}" id="ajaxform" enctype="multipart/form-data">
		<table class="info-table">
			<tbody>
				<tr>
					<th><b class="verifing">*</b>表单风格：</th>
					<td>
						<select name="theme">
							<php>$template = C('ALIZI_TEMPLATE');</php>
							<volist name="template" id="vo">
							<option value="{$key}" <eq name="temp.theme" value="$key">selected</eq>>{$vo}</option>
							</volist>
						</select>
						
						<select name="template" onchange="changeTheme('Alizi/'+this.value)">
							<option value="">自定义模板</option>
							<notempty name="custom">
								<volist name="custom" id="vo">
								<option value="{$vo.id}" <eq name="temp.template" value="$vo.id">selected</eq>>{$vo.name}</option>
								</volist>
							</optgroup>
							</notempty>
						</select>
						
						<span style="margin-left:60px;">模板宽度：<input type="text" class="ui-text" name="width" size="6" value="<empty name='temp.width'>750px<else />{$temp.width}</empty>"></span>
						<span class="ui-validityshower-info">（单位px或%）</span>
						<span style="margin-left:60px;">边距宽度：<input type="text" class="ui-text" name="padding" size="6" value="<empty name='extend.padding'>0<else />{$extend.padding}</empty>"></span>
						<span class="ui-validityshower-info">（单位px）</span>
					</td>
				</tr>
				<tr>
					<php>$color = json_decode($temp['color'],true);</php>
					<th><b class="verifing">*</b>{:lang('模板颜色_colon')}</th>
					<td class="colors">
						<volist name="deaultColor" id="value">
						<label class="ui-group-label">{$key|lang}<input type="text" id="color_{$key}" name="color[{$key}]" size="3" class="jscolor" value="<empty name='color'>#{$value}<else />{$color[$key]}</empty>"></label>
						</volist>
						<button type="button"class="ui-button" onclick="resetColor()" />重置</button>	
					</td>
				</tr>
				<tr>
					<th><b class="verifing">*</b>{:lang('表单选项_colon')}</th>
					<td>
						<volist name="options" id="vo">
						<label><input name="options[]" type="checkbox" value="{$key}" <notempty name="vo.checked">checked</notempty>>{$vo.name}</label>&nbsp;&nbsp;
						</volist>
					</td>
				</tr>
				<tr>
					<th>滚动信息</th>
					<td>
						<select name="show_notice">
							{:status($temp['show_notice'],'select','0:不显示;1:下方显示;2:右侧显示','show_notice')}
						</select>

					</td>
				</tr>
				<tr>
					<th>底部导航内容</th>
					<td>
						<p class="bottom_nav_list-1"><input type="text" class="ui-text"  size="60" name="bottom_nav_list[1]" value="{$extend['bottom_nav_list'][1]}" >例：立即下单||#aliziOrder||edit</p>
						<p class="bottom_nav_list-2"><input type="text" class="ui-text"  size="60" name="bottom_nav_list[2]" value="{$extend['bottom_nav_list'][2]}" >例：联系电话||tel:13888888888||call</p>
						<p class="bottom_nav_list-3"><input type="text" class="ui-text"  size="60" name="bottom_nav_list[3]" value="{$extend['bottom_nav_list'][3]}" >例：订单查询||http://{$_SERVER['HTTP_HOST']}{:C('ALIZI_ROOT')}index.php?m=Order&a=query||query</p>
					</td>
				</tr>
				<tr>
					<th>说明信息</th>
					<td>
						 <input type="button" value="插入html" onclick="insertHtml()" class="ui-button" />
						<textarea name="info" id="content" class="input-textarea editor" cols="80" rows="2"  style="width:100%;">{$temp.info}</textarea>
					</td>
				</tr>
				
				<tr>
					<th>调用代码</th>
					<td>
						<textarea name="using" id="using" class="input-textarea" cols="80" rows="3"  style="width:95%;"><iframe id="aliziIframe" name="aliziIframe" src="{$url.order}" width="100%" height="100%" scrolling="no" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0"></iframe></textarea>
					</td>
				</tr>
				<tr>
					<th>返回页面</th>
					<td>
						<input name="redirect_uri" class="ui-text" size="50" id="redirect_uri" type="text" value="{$temp.redirect_uri}" >
						<span class="ui-validityshower-info">（下单成功后点击返回页面）</span>
					</td>
				</tr>
				<tr>
					<th>模板调用</th>
					<td>
						<input type="submit"class="btn btn-ok" value="保存设置" />
						<a class="url btn" href="{$url.order}" id="tpl1" target="_blank">表单链接</a>
						<a class="url-detail btn" href="{$url.detail}" id="tpl2" target="_blank">推广链接</a>
						<a class="url-detail btn" href="{$url.buildHtml}" id="tpl2" target="_blank">静态链接</a>
					</td>
				</tr>
				<tr style="display:none;">
					<th>&nbsp;</th>
					<td>
						<input type="hidden" name="id" value="{$_GET['id']}" />
						<input type="hidden" name="user_id" value="{$_SESSION.user.id}" />
					</td>
				</tr>
			</tbody>
		</table>
		</form>
    </div><!--.box-->
<script type="text/javascript">
$(function(){
    $('#ajaxform').ajaxForm({
        success:function(data){ 
			color = data.data;
			parent.$.alert('保存成功',1);
		},
        dataType: 'json'
    });
	bottomNav();
});
function bottomNav(){
	var nav = $("input[name=bottom_nav]:checked").val();
	console.log(nav);
}
function resetColor(color){ 
	var color = color?color:{$deaultColor|json_encode};
	for(var key in color){ 
		var fontColor = key=='body_bg' || key=='form_bg'?'#000000':'#FFFFFF';
		$('#color_'+key).val(color[key]).css({"background-color":'#'+color[key],'color':fontColor});
	}
}

function changeTheme(theme){
	$.getJSON("?m=Item&a=getCustomColor&tpl="+theme, function(color) {
		resetColor(color.data);
	});
}
</script>   

<script type="text/javascript" charset="utf-8" src="__PUBLIC__/Assets/js/ueditor-1.4.3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/Assets/js/ueditor-1.4.3/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/Assets/js/ueditor-1.4.3/lang/zh-cn/zh-cn.js"></script>


<script type="text/javascript">
 function setContent(contents,msg) {
     var arr = [];
     UE.getEditor('content').setContent(contents, true);
     $.alert(msg?msg:'添加成功',1);
 }
 function insertHtml() {
     var value = prompt('插入html代码', '');
     UE.getEditor('content').execCommand('insertHtml', value)
 }
 UE.plugins["aliziPlugin"] = function() {
     var me = this, editor = this;
     var utils = baidu.editor.utils,
             Popup = baidu.editor.ui.Popup,
             Stateful = baidu.editor.ui.Stateful,
             uiUtils = baidu.editor.ui.uiUtils,
             UIBase = baidu.editor.ui.UIBase;
     var domUtils = baidu.editor.dom.domUtils;

     var clickPop = new baidu.editor.ui.Popup({
         content: "",
         editor: me,
         _remove: function() {
             $(clickPop.anchorEl).remove();
             clickPop.hide();
         },
         _blank: function() {
             $('<p><br/></p>').insertAfter(clickPop.anchorEl);
             clickPop.hide();
         },
         className: 'edui-bubble'
     });

     me.addListener("click",
         function(t, evt) {
             evt = evt || window.event;
             var el = evt.target || evt.srcElement;
             if (el.tagName == "IMG") {  return; }
             if ($(el).parents('.alizi-editor').size() > 0) {
                 el = $(el).parents('.alizi-editor:first').get(0);

                 current_active_ueitem = $(el);
                 clickPop.render();
                 var html = clickPop.formatHtml('<nobr class="alizi-poptools edui-default">模块：' + '<a href="javascript:;" onclick="$$._remove()" stateful>' + '删除</a>' + ' | <a href="javascript:;" onclick="$$._blank()" stateful>' + '其后插入空行</a>' + '</nobr>');
                 var content = clickPop.getDom('content');
                 content.innerHTML = html;
                 clickPop.anchorEl = el;
                 clickPop.showAnchor(clickPop.anchorEl);
             } else {
                 el.style.border="0";
                 if (current_active_ueitem) {  current_active_ueitem = null; }
             }
         });
 };
 var ue = UE.getEditor('content',{
            toolbars:[['fullscreen', 'source', '|', 'template', 'cleardoc',  '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch',  'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall',  'fontfamily', 'fontsize', 
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'simpleupload', 'insertimage']]
        });
</script>

</body>
</html>